<template>
  <a-card class="pbcard" :bordered="false">
    <a-row type="flex" justify="end">
      <a-button v-show="printModel" key="print" v-print="pdfConf">
          导出pdf
      </a-button>
    </a-row>
    <div id="tableview">

      <h2 style="text-align:center;" ref="title">广东培正学院学生科研项目立项申报书</h2>

      <a-form-model ref="form" :model="formData" v-if="!printModel" :rules="validatorRules" :form="form">
        <h4>一、项目信息表</h4>
        <table border="1px" class="table">
          <!-- 项目资料 -->
          <tr>
            <td width="50" rowspan="2" style="text-align:center;vertical-align:middle;">研<br />究<br />项<br />目</td>
            <td width="600">
              <a-form-model-item v-show="false">
                <div v-decorator="['researchProject.id', { initialValue: formData.researchProject.id }]"></div>
              </a-form-model-item>
              <a-form-model-item prop="researchProject.name" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="项目名称">
                <a-input
                  placeholder="请输入项目名"
                  v-model="formData.researchProject.name"
                  :disabled="!editable"
                />
              </a-form-model-item>
              <a-form-model-item prop="researchProject.source" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="项目来源">
                <j-dict-select-tag
                  type="radio"
                  v-model="formData.researchProject.source"
                  placeholder="请选择项目来源！"
                  :disabled="!editable"
                  dictCode="research_project_category"
                />
              </a-form-model-item>

              <a-form-model-item prop="researchProject.support" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="经费资助">
                <j-dict-select-tag
                  type="radio"
                  v-model="formData.researchProject.support"
                  placeholder="请选择经费资助级别！"
                  :disabled="!editable"
                  dictCode="research_project_level"
                />
              </a-form-model-item>

              <a-form-model-item prop="researchProject.timeRange" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="起止年月">
                <a-range-picker
                  :disabled="!editable"
                  format="YYYY-MM-DD"
                  v-model="formData.researchProject.timeRange"
                />
              </a-form-model-item>

              <a-form-model-item prop="researchProject.resultType" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="成果形式">
                <j-dict-select-tag
                  type="radio"
                  v-model="formData.researchProject.resultType"
                  placeholder="请选择成果形式！"
                  :disabled="!editable"
                  dictCode="research_project_result_type"
                />
                
              </a-form-model-item>
            </td>
          </tr>
          <!-- 指导老师 -->
          <tr>
            <td>
              <a-row :gutter="24" type="flex" justify="space-between">
                <a-col>
                  <h4>指导老师:</h4>
                </a-col>
                <a-col>
                  <!-- <x-select-user-by-dep class="xselectuser" v-if="editable" :multi="false" @selected="selectTeacher"></x-select-user-by-dep> -->
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item prop="instructor.name" v-show="false" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="姓名">
                    <a-input
                      :disabled="!editable"
                      placeholder=""
                      v-model="formData.instructor.name"
                    />
                  </a-form-model-item>
                  <a-form-model-item prop="instructor.instructorId" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="姓名">
                    <x-select-user-by-dep
                      searchIcon
                      :disabled="!editable"
                      v-model="formData.instructor.instructorId"
                      :multi="false"
                      @selected="selectTeacher"
                    ></x-select-user-by-dep>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="instructor.college" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="所属学院">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.instructor.college"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="instructor.education" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="最后学历">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.instructor.education"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="instructor.degree" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="最后学位">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.instructor.degree"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="instructor.expertise" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="研究专长">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.instructor.expertise"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="instructor.title" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="职称">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.instructor.title"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="instructor.phone" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="联系电话">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.instructor.phone"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="instructor.email" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="邮箱">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.instructor.email"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </td>
          </tr>
          <!-- 负责人 -->
          <tr>
            <td width="50" style="text-align:center;vertical-align:middle;">项<br />目<br />负<br />责<br />人</td>
            <td>
              <a-row :gutter="24" type="flex" justify="space-between">
                <a-col> </a-col>
                <a-col>
                  <!-- <x-select-user-by-dep v-if="editable" class="xselectuser" :multi="false" @selected="selectStudent"></x-select-user-by-dep> -->
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="12">
                  <a-form-model-item prop="director.name" v-show="false" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="姓名">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.director.name"
                    />
                  </a-form-model-item>
                  <a-form-model-item prop="director.directorId" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="姓名">
                    <x-select-user-by-dep
                      searchIcon
                      :disabled="!editable"
                      v-model="formData.director.directorId"
                      :multi="false"
                      @selected="selectStudent"
                    ></x-select-user-by-dep>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="director.stdNo" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="学号">
                    <a-input
                      placeholder=""
                      v-model="formData.director.stdNo"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="director.college" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="所属学院">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.director.college"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="director.major" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="专业">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.director.major"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="director.idCard" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="身份证号码">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.director.idCard"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="director.clazz" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="班级">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.director.clazz"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="director.phone" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="联系电话">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.director.phone"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item prop="director.email" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="邮箱">
                    <a-input
                      placeholder=""
                      :disabled="!editable"
                      v-model="formData.director.email"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </td>
          </tr>
          <!-- 项目成员 -->
          <tr>
            <td width="50" style="text-align:center;vertical-align:middle;">项<br />目<br />组<br />成<br />员</td>
            <td>
              <!-- <a-form-model-item v-show="false">
                <div v-decorator="['members', { initialValue: formData.members }]"></div>
              </a-form-model-item> -->
              <a-table class="memberList" rowKey="key" bordered :pagination="false" :data-source="formData.members" :columns="columns">
                <span style="text-align:center;" slot="actions"
                  >操作<a-button
                    style="margin-left:15px"
                    @click="handleAddMember"
                    :disabled="formData.members.length>=4"
                    type="primary"
                    icon="plus"
                    ></a-button
                  ></span
                >
                <template slot="name" slot-scope="text, record, index">
                  <a-form-model-item :prop="`members.${index}.name`" :rules="validatorRules.members.name" >
                    <a-input
                      :disabled="!editable"
                      v-model="record.name"
                    >
                      <x-select-user-by-dep
                        slot="addonAfter"
                        userType="student"
                        iconModel
                        :disabled="!editable"
                        :multi="false"
                        @selected="selectedMember($event,record,index)"
                      ></x-select-user-by-dep>
                    </a-input>
                  </a-form-model-item>
                </template>
                <template
                  v-for="col in ['college', 'major', 'stdNo', 'position', 'phone']"
                  :slot="col"
                  slot-scope="text, record, index"
                >
                  <a-form-model-item :key="col" :prop="`members.${index}.${col}`" :rules="validatorRules.members[col]">
                    <a-input
                      :type="col=='phone'?'tel':'text'"
                      v-model="record[col]"
                    />
                  </a-form-model-item>
                </template>

                <template slot="operation" slot-scope="text, record,index">
                  
                    <!-- <span v-if="record.editable">
                      <a @click="() => save(record.key)">保存</a>
                      <a-popconfirm style="margin-left: 15px" title="确定取消?" @confirm="() => cancel(record.key)">
                        <a>取消</a>
                      </a-popconfirm>
                    </span>
                    <span v-else>
                      <a :disabled="editingKey !== ''" @click="() => editTable(record.key)">编辑</a>
                      <a-popconfirm
                        :disabled="editingKey !== ''"
                        style="margin-left: 15px"
                        title="删除?"
                        @confirm="() => del(record.key)"
                      >
                        <a :disabled="editingKey !== ''">删除</a>
                      </a-popconfirm>
                    </span> -->
                    <a @click="formData.members.splice(index,1)">移除</a>
                </template>
              </a-table>
            </td>
          </tr>

          <!-- 研究目的 -->
          <tr>
            <td width="50" style="text-align:center;vertical-align:middle;">研究目的、意义的简要说明</td>
            <td>
              <a-form-model-item prop="researchProject.description">
                <a-textarea
                  :disabled="!editable"
                  :autoSize="{ minRows: 4, maxRows: 8 }"
                  showCount
                  allow-clear
                  :maxlength="200"
                  placeholder="请输入200字以内！"
                  v-model="formData.researchProject.description"
                />
              </a-form-model-item>
            </td>
          </tr>

          <!-- 附件 -->
          <tr>
            <td width="50" style="text-align:center;vertical-align:middle;">附件</td>
            <td>
              <a-form-model-item prop="researchProject.enclosures" style="padding:20px;">
                <j-upload
                  :disabled="!editable"
                  accept=""
                  v-model="formData.researchProject.enclosures"
                  text="上传文件"
                  bizPath="research_project"
                ></j-upload>
                <span style="color:orange;">上传文件大小不能超过10M</span>
              </a-form-model-item>
            </td>
          </tr>
        </table>

        <h4 style="margin-top:15px">二、项目研究内容和成果预计（3000字以内）</h4>
        <table border="1px" widht="100%" class="table">
          <tr>
            <td>
              <a-card
                style="margin-top:15px"
                :bordered="false"
                title="1.项目所涉及的学科领域、研究现状，本课题研究的主要思路、要解决的实际问题、应用价值及新意："
              >
                <a-form-model-item prop="details.0.content">
                  <a-textarea
                    allow-clear
                    :disabled="!editable"
                    :autoSize="{ minRows: 4, maxRows: 6 }"
                    :maxLength="1000"
                    placeholder="请输入1000字以内！"
                    v-model="formData.details[0].content"
                  />
                </a-form-model-item>
              </a-card>
              <a-card style="margin-top:15px" :bordered="false" title="2.进度安排以及对工作条件的要求：">
                <a-form-model-item prop="details.1.content">
                  <a-textarea
                    allow-clear
                    :disabled="!editable"
                    :autoSize="{ minRows: 4, maxRows: 6 }"
                    :maxLength="1000"
                    placeholder="请输入1000字以内！"
                    v-model="formData.details[1].content"
                  />
                </a-form-model-item>
              </a-card>
              <a-card style="margin-top:15px" :bordered="false" title="3.预计成果及提交方式：">
                <a-form-model-item prop="details.1.content">
                  <a-textarea
                    :disabled="!editable"
                    :autoSize="{ minRows: 4, maxRows: 6 }"
                    allow-clear
                    :maxlength="1000"
                    placeholder="请输入1000字以内！"
                    v-model="formData.details[2].content"
                  />
                </a-form-model-item>
              </a-card>
            </td>
          </tr>
        </table>

        <h4 style="margin-top:15px">三、申请项目经费预算表</h4>
        <table border="1px" widht="100%" class="table">
          <tr>
            <td width="904px" style="padding:15px">
              <a-form-model-item prop="researchProject.fundAmount" :rules="[{ required: true, message: '请输入金额' },...validatorRules.amount]" :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="申请资助金额">
                <a-input
                  :disabled="!editable"
                  type="number"
                  placeholder="请输入"
                  v-model="formData.researchProject.fundAmount"
                />
              </a-form-model-item>
              <a-row :gutter="[16, 16]">
                <a-col :span="4">科目</a-col>
                <a-col :span="6">经费（元）</a-col>
                <a-col :span="14">依据或说明</a-col>
              </a-row>
              <a-row :gutter="[16, 16]" v-for="(item, key) of formData.funds" :key="key">
                <a-col :span="4"
                  >{{ item.name }}：
                </a-col>
                <a-col :span="6"
                  ><a-form-model-item :prop="`funds.${key}.amount`" :rules="validatorRules.amount" 
                    ><a-input
                      :disabled="!editable"
                      type="number"
                      v-model="item.amount"/></a-form-model-item
                ></a-col>
                <a-col :span="14"
                  ><a-form-model-item
                    ><a-input
                      :disabled="!editable"
                      v-model="item.description"/></a-form-model-item
                ></a-col>
              </a-row>
            </td>
          </tr>
        </table>

        <slot></slot>
      </a-form-model>
      <div v-if="printModel" id="printView" align="center" style="font-size:medium;">
        <h4>一、项目信息表</h4>
        <table class="MsoNormalTable" border="1" cellspacing="0" style='font-family:"font-size:10pt;'>
          <colgroup>
            <col width="50">
            <col width="50">
            <col width="70">
            <col width="50">
            <col width="70">
            <col width="50">
            <col width="50">
            <col width="50">
            <col width="70">
            <col width="70">
          </colgroup>
          <tbody>
            <tr>
              <td width="40" valign="center" rowspan="8">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:5pt;"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">研究项目</span
                  ><span style="font-family:仿宋_GB2312;font-size:5.5pt;"></span>
                </p>
              </td>
              <td width="54" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">项目名称</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="359" valign="center" colspan="8">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.researchProject.name }}</span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="54" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">项目来源</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="359" valign="center" colspan="8">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <!-- <span style="font-family:仿宋_GB2312;font-size:10.5pt;"
                    >自选（&emsp; &emsp;） &nbsp;&emsp;教师科研课题（&emsp; &emsp;）
                    &nbsp;&nbsp;&nbsp;&emsp;社会实践（&emsp; &emsp;）</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span> -->
                  <j-dict-select-tag
                    type="radio"
                    disabled
                    v-model="formData.researchProject.source"
                    dictCode="research_project_category"
                  />
                </p>
              </td>
            </tr>
            <tr>
              <td width="54" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">经费资助</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="180" valign="center" colspan="4">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <!-- <span style="font-family:仿宋_GB2312;font-size:10.5pt;"
                    >重点资助项目（ &nbsp;&nbsp;）一般资助项目（&emsp; ）</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span> -->
                  <j-dict-select-tag
                    type="radio"
                    disabled
                    v-model="formData.researchProject.support"
                    dictCode="research_project_level"
                  />
                </p>
              </td>
              <td width="50" valign="center" colspan="1">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">起止年月</span
                  ><span style="font-family:仿宋_GB2312;font-size:9pt;"></span>
                </p>
              </td>
              <td width="150" valign="center" colspan="3">
                <p class="MsoNormal" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt">
                    {{
                      formData.researchProject.startTime
                        ? moment(formData.researchProject.startTime).format('YYYY年MM月')
                        : '&nbsp;&nbsp;&nbsp;&nbsp;年 &nbsp;&nbsp;月'
                    }}
                    至
                    {{
                      formData.researchProject.endTime
                        ? moment(formData.researchProject.endTime).format('YYYY年MM月')
                        : '&nbsp;&nbsp;&nbsp;&nbsp;年 &nbsp;&nbsp;月'
                    }} </span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="54" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">成果形式</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="359" valign="center" colspan="8">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">
                    <j-dict-select-tag
                      type="radio"
                      v-model="formData.researchProject.resultType"
                      disabled
                      dictCode="research_project_result_type"
                    /> </span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="54" valign="center" rowspan="4">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">指导教师</span
                  ><span style="font-family:仿宋_GB2312;font-size:9pt;"></span>
                </p>
              </td>
              <td width="61" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">姓 &nbsp;&nbsp;&nbsp;名</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="105" valign="center" colspan="2">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.instructor.name }}</span>
                </p>
              </td>
              <td width="63" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">所属院（系）</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="128" valign="center" colspan="3">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.instructor.college }}</span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="61" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">最后学历</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="105" valign="center" colspan="2">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.instructor.education }}</span>
                </p>
              </td>
              <td width="63" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">最后学位</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="128" valign="center" colspan="3">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.instructor.degree }}</span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="61" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">研究专长</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="105" valign="center" colspan="2">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.instructor.expertise }}</span>
                </p>
              </td>
              <td width="63" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">职 &nbsp;&nbsp;&nbsp;称</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="128" valign="center" colspan="3">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.instructor.title }}</span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="61" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">联系电话</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="105" valign="center" colspan="2">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.instructor.phone }}</span>
                </p>
              </td>
              <td width="63" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">邮 &nbsp;&nbsp;&nbsp;箱</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="128" valign="center" colspan="3">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.instructor.email }}</span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="24" valign="center" rowspan="4">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">项目负责人</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="54" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">姓 &nbsp;&nbsp;&nbsp;名</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="61" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.director.name }}</span>
                </p>
              </td>
              <td width="41" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">签 &nbsp;名</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="64" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">&nbsp;</span>
                </p>
              </td>
              <td width="63" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">学 &nbsp;&nbsp;&nbsp;号</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="128" valign="center" colspan="3">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.director.stdNo }}</span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="54" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">所属院系</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="167" valign="center" colspan="3">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.director.college }}</span>
                </p>
              </td>
              <td width="63" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">专 &nbsp;&nbsp;&nbsp;业</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="128" valign="center" colspan="3">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.director.major }}</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="54" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">身份证</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">号码</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="167" valign="center" colspan="3">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.director.idCard }}</span>
                </p>
              </td>
              <td width="63" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">班 &nbsp;&nbsp;&nbsp;级</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="128" valign="center" colspan="3">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.director.clazz }}</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="54" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">Email</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="167" valign="center" colspan="3">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.director.email }}</span>
                </p>
              </td>
              <td width="63" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">电 &nbsp;&nbsp;&nbsp;话</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="128" valign="center" colspan="3">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.director.phone }}</span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="24" valign="center" rowspan="5">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">项目组成员</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:5pt;">&nbsp;</span>
                </p>
              </td>
              <td width="54" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">姓 &nbsp;&nbsp;名</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="103" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">所在院（系）及专业</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="64" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">学 &nbsp;&nbsp;号</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="63" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">承担任务</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="60" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">联系电话</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="68" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">签名</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
            </tr>
            <tr v-for="key in [0, 1, 2, 3]" :key="key">
              <td width="54" valign="top">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{
                    formData.members[key] ? formData.members[key].name : ''
                  }}</span>
                </p>
              </td>
              <td width="103" valign="top" colspan="2">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{
                    formData.members[key] ? formData.members[key].college : ''
                  }}</span>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{
                    formData.members[key] ? formData.members[key].major : '&nbsp;'
                  }}</span>
                </p>
              </td>
              <td width="63" valign="top">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{
                    formData.members[key] ? formData.members[key].stdNo : '&nbsp;'
                  }}</span>
                </p>
              </td>
              <td width="60" valign="top" colspan="2">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{
                    formData.members[key] ? formData.members[key].position : '&nbsp;'
                  }}</span>
                </p>
              </td>
              <td width="68" valign="top" colspan="2">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{
                    formData.members[key] ? formData.members[key].phone : '&nbsp;'
                  }}</span>
                </p>
              </td>
              <td width="68" valign="top">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'></p>
              </td>
            </tr>

            <tr>
              <td width="24" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">研究目的、意义的简要说明</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="413" valign="top" colspan="9">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:12pt;">{{ formData.researchProject.description }}</span>
                </p>
              </td>
            </tr>
          </tbody>
        </table>
        <h4 style="margin-top:15px">二、项目研究内容和成果预计（3000字以内）</h4>
        <table class="MsoNormalTable" border="1" cellspacing="0" style='font-family:"font-size:10pt;'>
          <tbody>
            <tr>
              <td width="447" valign="top">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;"
                    >1.项目所涉及的学科领域、研究现状，本课题研究</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;">的主要思路</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;">、要解决的实际问题、</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;">应用价值</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;">及新意：</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;min-height:18em;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.details[0].content }}</span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="447" valign="top">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">2.进度安排以及对工作条件的要求：</span>
                </p>
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;min-height:18em;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.details[1].content }}</span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="447" valign="top">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">3.预计成果及提交方式：</span>
                </p>
                <p
                  class="MsoNormal"
                  style='text-align:justify;font-family:"font-size:10.5pt;text-indent:10.5pt;min-height:18em;'
                >
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ formData.details[2].content }}</span>
                </p>
              </td>
            </tr>
          </tbody>
        </table>
        <h4 style="margin-top:15px">三、申请项目经费预算表</h4>
        <table class="MsoNormalTable" border="1" cellspacing="0" style='font-family:"font-size:10pt;'>
          <tbody>
            <tr>
              <td width="445" valign="top" colspan="3">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">申请资助金额 ：</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"
                    >{{ formData.researchProject.fundAmount }}元</span
                  >
                </p>
              </td>
            </tr>
            <tr>
              <td width="93" valign="top">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">科 &nbsp;&nbsp;目</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="87" valign="top">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">经费（元）</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="264" valign="top">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">依 据 或 说 明</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
            </tr>
            <tr v-for="(item, key) of formData.funds" :key="key">
              <td width="93" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ item.name }}</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="87" valign="top">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ item.amount }}</span>
                </p>
              </td>
              <td width="264" valign="top">
                <p class="MsoNormal" style='text-align:justify;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">{{ item.description }}</span>
                </p>
              </td>
            </tr>
          </tbody>
        </table>

        <h4 style="margin-top:15px">四、审核意见</h4>
        <table class="MsoNormalTable" border="1" cellspacing="0" style='font-family:"font-size:10pt;'>
          <tbody>
            <tr>
              <td width="60" valign="center" colspan="1">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">指</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">导</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">教</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">师</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">意</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">见</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="500" valign="top" colspan="5">
                <div
                  class="MsoNormal"
                  style='display:block;min-height:10em;text-align:justify;font-family:"font-size:10.5pt;'
                >
                  <div style="font-family:仿宋_GB2312;font-size:10.5pt;" v-html="task1.opinion"></div>
                </div>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
                >
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">签 &nbsp;名: &nbsp;{{task1.dealUserName}}</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
                >
                </p>
                <p class="MsoNormal" align="right" style='text-align:right;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;"
                    >{{task1.dealTime? moment(task3.dealTime).format('&nbsp;&nbsp;yyyy&nbsp;年&nbsp;&nbsp;MM&nbsp;月&nbsp;&nbsp;DD&nbsp;日'):'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日'}}</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="38" valign="center">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">申报单位领导意见</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="403" valign="top" colspan="5">
                <div
                  class="MsoNormal"
                  style='display:block;min-height:10em;text-align:justify;font-family:"font-size:10.5pt;'
                >
                  <div style="font-family:仿宋_GB2312;font-size:10.5pt;" v-html="task2.opinion"></div>
                </div>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
                >
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">签 &nbsp;名（盖章）: &nbsp;{{task2.dealUserName}}</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
                >
                </p>
                <p class="MsoNormal" align="right" style='text-align:right;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;"
                    >{{task2.dealTime? moment(task2.dealTime).format('&nbsp;&nbsp;yyyy&nbsp;年&nbsp;&nbsp;MM&nbsp;月&nbsp;&nbsp;DD&nbsp;日'):'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日'}}</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
            </tr>
            <tr>
              <td width="38" valign="center" rowspan="3">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">学生科研管理委员会意见</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="41" valign="center" rowspan="2" >
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">审批</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="144" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">经费资助项目</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="218" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">同意（&nbsp;<i style="font-family: Arial;letter-spacing: -1px;font-size: 14px">{{formData.approveResult?"√":"&nbsp;"}}</i>&nbsp;）</span>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">不同意（&nbsp;<i style="font-family: Arial;letter-spacing: -1px;font-size: 14px">{{formData.approveResult===false?"√":"&nbsp;"}}</i>&nbsp;）</span>
                  
                </p>
              </td>
            </tr>
            <tr>
              <td width="144" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">批准经费资助额度</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
              <td width="218" valign="center" colspan="2">
                <p class="MsoNormal" align="center" style='text-align:center;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">&nbsp;{{formData.finalFundAmount}}&nbsp;元</span
                  >
                </p>
              </td>
            </tr>
            <tr>
              <td width="403" valign="top" colspan="5">
                <div
                  class="MsoNormal"
                  style='display:block;min-height:10em;text-align:justify;font-family:"font-size:10.5pt;'
                >
                  <div style="font-family:仿宋_GB2312;font-size:10.5pt;" v-html="task3.opinion"></div>
                </div>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:60%;'
                >
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;">签 &nbsp;名（盖章）: &nbsp;{{task3.dealUserName}}</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
                <p
                  class="MsoNormal"
                  style='text-align:justify;line-height: 2.5;font-family:"font-size:10.5pt;text-indent:65%;'
                >
                </p>
                <p class="MsoNormal" align="right" style='text-align:right;font-family:"font-size:10.5pt;'>
                  <span style="font-family:仿宋_GB2312;font-size:10.5pt;"
                    >{{task3.dealTime? moment(task3.dealTime).format('&nbsp;&nbsp;yyyy&nbsp;年&nbsp;&nbsp;MM&nbsp;月&nbsp;&nbsp;DD&nbsp;日'):'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日'}}</span
                  ><span style="font-family:仿宋_GB2312;font-size:10.5pt;"></span>
                </p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
  </a-card>
</template>

<script>
import XSelectUserByDep from '@/components/extends/XSelectUserByDep'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import JUpload from '@/components/jeecg/JUpload'
import { FormTypes } from '@/utils/JEditableTableUtil'
import { merge, find } from 'lodash'
import { getProjectById } from '@/api/api'
import { httpAction, getAction } from '@/api/manage'
import moment from 'moment'
let formData = {
  members: [],
  funds: [
    {
      name: '图书资料费',
      amount: null,
      description: ''
    },
    {
      name: '调研差旅费',
      amount: null,
      description: ''
    },
    {
      name: '复印费',
      amount: null,
      description: ''
    },
    {
      name: '通讯费',
      amount: null,
      description: ''
    },
    {
      name: '小型会议费',
      amount: null,
      description: ''
    },
    {
      name: '劳务费',
      amount: null,
      description: ''
    },
    {
      name: '其他',
      amount: null,
      description: ''
    }
  ],
  details: [
    {
      content: '',
      title: '1.项目所涉及的学科领域、研究现状，本课题研究的主要思路、要解决的实际问题、应用价值及新意：'
    },
    {
      content: '',
      title: '2.进度安排以及对工作条件的要求：'
    },
    {
      content: '',
      title: '3.预计成果及提交方式：'
    }
  ],
  director: {
    clazz: '',
    college: '',
    email: '',
    id: '',
    directorId: '',
    idCard: '',
    major: '',
    name: '',
    phone: '',
    projectId: '',
    stdNo: ''
  },
  instructor: {
    college: '',
    degree: '',
    education: '',
    email: '',
    expertise: '',
    id: '',
    instructorId: '',
    name: '',
    phone: '',
    projectId: '',
    title: ''
  },
  researchProject: {
    id: '',
    name: '',
    timeRange: [null, null],
    createTime: null,
    creatorId: '',
    creatorName: '',
    dealFlag: 0,
    description: '',
    director: '',
    exportIndex: 0,
    enclosures: '',
    finalFundAmount: null,
    fundAmount: null,
    instructor: '',
    resultType: '',
    source: '',
    startTime: null,
    endTime: null,
    support: ''
  }
}
export default {
  name: 'ProjectBuild',
  components: {
    JUpload,
    JDictSelectTag,
    XSelectUserByDep
  },
  model: {
    prop: 'data',
    event: 'onchange'
  },
  props: {
    dataId: String,
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    browseMode: Boolean,
    printModel: Boolean,
    editable: {
      type: Boolean,
      default: true
    },
    editableFiexd: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      moment,
      BaseUrl: window._CONFIG['domianURL'],
      loading: false,
      editingKey: '',
      projectTypes: [],
      configList: [],
      url: {
        config: '/bizConfig/list',
        dict: '/sys/dictItem/list',
        add: '/researchProject/add',
        edit: '/researchProject/edit',
        queryById: '/researchProject/queryById'
      },
      formData: merge({}, formData),
      form: this.$form.createForm(this, {
        name: 'projectData'
      }),
      validatorRules:{
        amount:[{pattern:/^([1-9]\d{0,9}|0)(\.\d{1,2})?$/,message: '金额为最多两位小数的正数'}],
        researchProject:{
          name:[{ required: true, message: '请输入项目名称' }],
          source:[{ required: true, message: '请选择项目来源' }],
          support:[{ required: true, message: '经费资助不能为空！' }],
          timeRange:[{ type: 'array', required: true, message: '请选择起止日期!' },{validator:(rule, value, callback)=>{
            if (!value[0] || !value[1]) {
              callback('请选择起止日期')
            } else {
              // callback不传参数表示校验通过
              callback()
            }
          }}],
          resultType:[{ required: true, message: '请选择成果形式！' }],
          description:[{ required: true, message: '请输入研究目的！' },{ minLength: 20, message: '至少20个字符！' }],
        },
        instructor:{
          name:[{ required: true, message: '请输入指导老师姓名！' }],
          instructorId:[{ required: true, message: '请选择指导老师！' }],
          college:[{ required: true, message: '请输入指导老师所属学院！' }],
          education:[{ required: true, message: '请输入指导老师学历！' }],
          degree:[{ required: true, message: '请输入指导老师学位！' }],
          expertise:[{ required: true, message: '请输入指导老师研究专长！' }],
          title:[{ required: true, message: '请输入指导老师职称！' }],
          phone:[{required: true,message: '请输入指导老师联系电话！'},{validator: this.validateMobile}],
          email:[{ required: true, message: '请输入指导老师邮箱！' },{validator: this.validateEmail}],

        },
        director:{
          name:[{ required: true, message: '请输入负责人姓名！' }],
          directorId:[{ required: true, message: '请选择学生负责人！' }],
          stdNo:[{ required: true, message: '请输入负责人学号！' }],
          college:[{ required: true, message: '请输入负责人所属学院！' }],
          major:[{ required: true, message: '请输入负责人专业！' }],
          idCard:[{ required: true, message: '请输入负责人身份证！' },{  validator: (rule, value, callback) =>{
            var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
            if(reg.test(value) !== false) {
              callback();
            }
            callback('身份证格式不正确!');
          }}],
          clazz:[{ required: true, message: '请输入负责人班级！' }],
          phone:[{ required: true, message: '请输入负责人联系电话！' },{ validator: this.validateMobile }],
          email:[{ required: true, message: '请输入负责人邮箱！' },{ validator: this.validateEmail }],

        },
        details:{
          0:{
            content:[{ required: true, message: '请输入内容！' },{maxLength:1000,message:'请输入1000字以内'}]
          },
          1:{
            content:[{ required: true, message: '请输入内容！' }]
          },
          2:{
            content:[{ required: true, message: '请输入内容！' },{maxLength:1000,message:'请输入1000字以内'}]
          }
        },
        members:{
          name: [
            { required: true, message: '请输入名称！' }
          ],
          college: [
            { required: true, message: '请输入学院！' }
          ],
          major: [
            { required: true, message: '请输入系别！' }
          ],
          position: [
            { required: true, message: '请输入承担任务！' }
          ],
          stdNo:[
            { required: true, message: '请输入学号！' },
            // { pattern:/^\d{10}$/,message: '请填入十位数字！' }
          ],
          phone: [
            { required: true, message: '请输入电话！' },
            {
              validator: this.validateMobile
            }
          ]
        },
      },
      
      dataSource: [],
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
          width:150
        },
        {
          title: '学院',
          dataIndex: 'college',
          scopedSlots: { customRender: 'college' }
        },
        {
          title: '专业',
          dataIndex: 'major',
          scopedSlots: { customRender: 'major' }
        },
        {
          title: '学号',
          dataIndex: 'stdNo',
          scopedSlots: { customRender: 'stdNo' }
        },
        {
          title: '承担任务',
          dataIndex: 'position',
          scopedSlots: { customRender: 'position' },
          ellipsis: true
        },
        {
          title: '联系电话',
          dataIndex: 'phone',
          scopedSlots: { customRender: 'phone' }
        },
        {
          //   title: '操作',
          dataIndex: 'operation',
          align:'center',
          width: 110,
          scopedSlots: { title: 'actions', customRender: 'operation' }
        }
      ],
      pdfConf:{
        id:'tableview',
        popTitle: '广东培正学院',
        beforeOpenCallback (vue) {
          vue.title = document.title
          document.title = '广东培正学院学生科研项目立项申报书'
        },
        closeCallback (vue) {
          document.title = vue.title
        }
      }
    }
  },
  computed:{
    task1(){
      if(this.formData&&Array.isArray(this.formData.approveRecords)){
        return this.formData.approveRecords[0]||{}
      }else{
        return {}
      }
    },
    task2(){
      let data = {}
      if(this.formData&&Array.isArray(this.formData.approveRecords)){
        data =  this.formData.approveRecords[1]||{}
      }
      if(!data.taskFieldList) data.taskFieldList = {}
      return data
    },
    task3(){
      if(this.formData&&Array.isArray(this.formData.approveRecords)){
        return this.formData.approveRecords[2]||{}
      }else{
        return {}
      }
    },
  },
  created() {
    // this.form.resetFields()
    this.getConfig()
    let id = this.dataId || (this.formData.researchProject && this.formData.researchProject.id)
    if (id) {
      this.getDataById(id)
    }
  },
  watch: {
    configList: {
      handler(nv, ov) {
        let obj = find(this.configList, { type: 'DICT' })
        if (obj && obj.value) {
          getAction(this.url.dict, {
            dictId: obj.value,
            delFlag: 1,
            column: 'sortOrder',
            order: 'asc',
            pageNo: 1,
            pageSize: 100
          }).then(res => {
            if (res.success) {
              this.projectTypes = res.result.records
            }
          })
        }
      },
      immediate: true,
      deep: true
    },
    dataId: {
      handler(nv, ov) {
        if (nv&&nv!=ov) {
          this.formData = formData
          this.getDataById(nv)
        }
      },
      immediate: true
    },
    data: {
      handler(nv, ov) {
        // this.formData = merge(this.formData, nv)
      },
      immediate: true,
      deep: true
    },
    formData: {
      handler(nv, ov) {
        this.$emit('onchange', nv)
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    add(data) {
      this.userDisabled = true
      this.open(
        merge(
          {
            researchProject: {
              actStatus: 10
            }
          },
          data
        )
      )
    },
    apply(data) {
      this.userDisabled = true
      this.open(merge({}, data))
    },
    edit(record) {
      this.userDisabled = true
      this.open(merge({}, record))
    },
    open(record) {
      // this.form.resetFields()
      this.loading = false
      if (record.id) {
        this.queryData(record.id).then(()=>{
          if(record.workflowModel) merge(this.formData,{workflowModel:record.workflowModel})
        })
      }
    },
    selectedMember(data,item,index){
      let rows = data.row
      if (Array.isArray(rows) && rows[0]) {
        let obj = {
          // userId:rows[0].id,
          name: rows[0].realname,
          college: rows[0].college,
          stdNo: rows[0].username,
          major:rows[0].major,
          phone: rows[0].phone
        }
        this.$nextTick(()=>{
          Object.assign(item, obj)
          this.validateField(`members.${index}.stdNo`)
          this.validateField(`members.${index}.college`)
          this.validateField(`members.${index}.major`)
          this.validateField(`members.${index}.phone`)
          this.validateField(`members.${index}.position`)
        })

      }
    },
    selectTeacher(data) {
      let rows = data.row
      if (Array.isArray(rows) && rows[0]) {
        let obj = {
          instructorId: rows[0].id,
          name: rows[0].realname,
          college: rows[0].college,
          education: rows[0].education,
          email: rows[0].email,
          expertise: rows[0].expertise,
          phone: rows[0].phone
        }
        Object.assign(this.formData.instructor, obj)

        this.validateField('instructor.college')
        this.validateField('instructor.education')
        this.validateField('instructor.email')
        this.validateField('instructor.expertise')
        this.validateField('instructor.phone')
      }
    },
    selectStudent(data) {
      let rows = data.row
      if (Array.isArray(rows) && rows[0]) {
        let obj = {
          directorId: rows[0].id,
          name: rows[0].realname,
          stdNo: rows[0].stdNo,
          college: rows[0].college,
          major: rows[0].major,
          idCard: rows[0].idCard,
          email: rows[0].email,
          phone: rows[0].phone,
          clazz: rows[0].clazz
        }
        Object.assign(this.formData.director, obj)

        this.validateField('director.stdNo')
        this.validateField('director.college')
        this.validateField('director.major')
        this.validateField('director.email')
        this.validateField('director.idCard')
        this.validateField('director.phone')
        this.validateField('director.clazz')
      }
    },
    validateField(type) {
      this.$refs.form.validateField(type);
    },
    getConfig() {
      getAction(this.url.config, {
        module: 'research_project'
      }).then(res => {
        if (res.success && res.result) {
          this.configList = res.result.records
        } else {
          this.configList = []
        }
      })
    },
    getDataById(id) {
      let that = this
      that.loading = true
      return getProjectById({ id })
        .then(res => {
          let startTime = res.result.researchProject.startTime ? res.result.researchProject.startTime : null
          let endTime = res.result.researchProject.endTime ? res.result.researchProject.endTime : null
          that.formData = merge({}, formData, res.result, {
            director: {
              projectId: id
            },
            instructor: {
              projectId: id
            },
            researchProject: {
              id,
              startTime,
              endTime,
              timeRange:[startTime,endTime]
            }
          })
          if(Array.isArray(that.formData.members))
          that.formData.members.map((item,index)=>{
            item.key = item.key || index
          })
        })
        .finally(res => {
          that.loading = false
        })
    },
    handleAddMember() {
      this.formData.members.push({
        key: this.formData.members.length + 1,
        userId:'',
        college: '',
        major: '',
        name: '',
        phone: '',
        position: '',
        stdNo: '',
      })
    },
    saveForm() {
      const that = this

      return new Promise(function(resolve, reject) {
        // 触发表单验证
        // let values = that.$refs.form.getFieldsValue()
        let formData = merge(
          {
            researchProject: {
              actStatus: 0
            }
          },
          that.formData
        )
        that.confirmLoading = true
        let httpurl = ''
        let method = ''
        if (!formData.researchProject.id) {
          httpurl += that.url.add
          method = 'post'
        } else {
          httpurl += that.url.edit
          method = 'put'
        }
        if (!formData.researchProject.name) {
          return that.$message.warning('项目名称不能为空！')
        }
        if (formData.researchProject.timeRange) {
          formData.researchProject.startTime =
            formData.researchProject.timeRange[0] ?
            moment(formData.researchProject.timeRange[0]).format('YYYY-MM-DD HH:mm:ss'):null
          formData.researchProject.endTime =
            formData.researchProject.timeRange[1] ?
            moment(formData.researchProject.timeRange[1]).format('YYYY-MM-DD HH:mm:ss'):null
        }
        delete formData.researchProject.timeRange
        httpAction(httpurl, formData, method)
          .then(res => {
            if (res.success) {
              that.$message.success(res.message)
              that.$emit('ok')
              resolve('ok')
            } else {
              that.$message.warning(res.message)
              reject(res.message)
            }
          })
          .catch(err=>{
                reject(err)
              })
          .finally(() => {
            that.confirmLoading = false
          })
      })
    },
    submitForm(isStart) {
      const that = this
      // 触发表单验证
      return new Promise(function(resolve, reject) {
        that.$refs.form.validate((valid, fields) => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!that.formData.researchProject.id) {
              httpurl += that.url.add
              method = 'post'
            } else {
              httpurl += that.url.edit
              method = 'put'
            }
            let workflowModel = isStart
              ? {}
              : {
                  workflowModel: {
                    operation: 'start'
                  }
                }
                
            let formData = merge({}, that.formData, workflowModel)
            formData.researchProject.actStatus = 1
            formData.researchProject.startTime = moment(formData.researchProject.timeRange[0] || null).valueOf()
            formData.researchProject.endTime = moment(formData.researchProject.timeRange[1] || null).valueOf()
            delete formData.researchProject.timeRange
            
            httpAction(httpurl, formData, method)
              .then(res => {
                if (res.success) {
                  that.$message.success(res.message)
                  that.$emit('ok')
                  resolve('ok')
                } else {
                  that.$message.warning(res.message)
                  reject(res.message)
                }
              })
              .catch(err=>{
                reject(err)
              })
              .finally(() => {
                that.confirmLoading = false
              })
          } else {
            that.$message.warning('校验错误，请检查表单内容！')
            reject(fields)
          }
        })
      })
    },
    validateEmail(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (
          new RegExp(
            /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
          ).test(value)
        ) {
          callback()
        } else {
          callback('请输入正确格式的邮箱!')
        }
      }
    },
    validateMobile(rule, value, callback) {
      if (!value || new RegExp(/^((0\d{2,3}-?\d{7,8})|(1[3465789]\d{9}))$/).test(value)) {
        callback()
      } else {
        callback('号码格式不正确!')
      }
    }
  }
}
</script>

<style lang="less" scope>
.pbcard .ant-card-body{
  padding: 10px;
}
.memberList{
  .ant-form-item{
    margin: 5px 0;
  }
  .ant-form-explain{
    position:absolute;
  }
}
table {
  width: 100%;
  table-layout: fixed;
}
table td {
  line-height: 1.6;
}
.MsoNormal {
  margin: 5px !important;
}
.xselectuser {
  display: inline-flex;
}
#printView /deep/label.ant-radio-wrapper {
  display: inline-flex;
  flex-direction: row-reverse;
}
#printView /deep/label.ant-radio-wrapper .ant-radio {
  display: inline-flex;
}
#printView /deep/label.ant-radio-wrapper .ant-radio::before {
  display: inline;
  content: '（';
}
#printView /deep/label.ant-radio-wrapper .ant-radio::after {
  display: inline;
  content: '）';
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  border: none;
  border-radius: 50%;
  visibility: visible;
  animation: none;
  animation-fill-mode: both;
}
#printView /deep/label.ant-radio-wrapper .ant-radio .ant-radio-inner,
#printView /deep/label.ant-radio-wrapper .ant-radio.ant-radio-disabled .ant-radio-inner {
  background-color: transparent;
  border-color: transparent !important;
}
#printView /deep/label.ant-radio-wrapper .ant-radio.ant-radio-disabled + span {
  color: inherit;
}
#printView /deep/label.ant-radio-wrapper .ant-radio.ant-radio-checked .ant-radio-inner::after {
  content: '√';
  background-color: transparent;
}
.xselectuser /deep/.ant-input {
  display: none;
}
.xselectuser /deep/.ant-btn {
  border-radius: 0 !important;
  margin: 0 !important;
}
</style>
